<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/* Page */
*{margin:0;padding:0;}
#page {
	width: 1024px;
	margin: 0 auto;
	padding: 20px 0;
}

/* Content */
.entry{height:80px;margin:10px;}

#content {
	float: left;
	width: 750px;
}

.post {
	padding: 0 0 20px 0;
}
.post h2{color:#666}
.title {
	margin: 0;
	border-bottom: 2px solid #4A3903;
}

.byline {
	margin: 0;
}

.meta {
	border-top: 1px solid #4A3903;
	text-align: right;
	color: #646464;
}

.meta a {
	padding-left: 15px;
	background: url(../image/kuanjia/img06.gif) no-repeat left center;
	font-weight: bold;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 240px;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	padding-left: 30px;
	border-bottom: 1px dotted #4A3903;
	background: url(../image/kuanjia/img06.gif) no-repeat 15px 50%;
}

#sidebar h2 {
	margin: 0;
	padding: 0 0 2px 30px;
	background: url(../image/kuanjia/img05.gif) no-repeat left bottom;
	border-bottom: 2px solid #4A3903;
}

#sidebar a {
	text-decoration: none;
	color:black;
}

#sidebar a:hover {
	text-decoration: underline;
}

/* Footer */

#footer {
	clear: both;
	padding:20px  0;
	background: #46e3f7;
	text-align: center;
	font-size: smaller;
	color: #5799f7;
}

#footer a {
	color: #40b3f7;
}

</style>
</head>
<body>
<div id="page" height="">
	<!-- start content -->
	<div id="content">
		<div class="post">
			<h2 class="title">个人名片</h2>
			<p class="byline"><small>2016年5月26日发布 &nbsp;&nbsp;<a href="#">管理</a> | <a href="#">编辑</a></small></p>
			<div class="entry">
				<p>我将记忆交由相机来存取，当它变成了照片，就会孕育出新的记忆来。我希望把每个人拍的真实与自我，喜欢纯粹自然的事物，喜欢清新浪漫的画面呈现，喜欢简单的表达，这就是我要给你的，用心拍摄属于你内心的青春影像录。</p>
			</div>
			<p class="meta"><a href="#" class="more">阅读全文</a> &nbsp;&nbsp;&nbsp; <a href="#" class="comments">评论 (33)</a></p>
		</div>
		<div class="post">
		  <h2 class="title">对摄影的认识</h2>
			<p class="byline"><small>2016年5月26日发布 &nbsp;&nbsp;<a href="#">管理</a> | <a href="#">编辑</a></small></p>
		  <div class="entry">
				<p>我将记忆交由相机来存取，当它变成了照片，就会孕育出新的记忆来。我希望把每个人拍的真实与自我，喜欢纯粹自然的事物，喜欢清新浪漫的画面呈现，喜欢简单的表达，这就是我要给你的，用心拍摄属于你内心的青春影像录。</p>
			</div>
			<p class="meta"><a href="#" class="more">阅读全文</a> &nbsp;&nbsp;&nbsp; <a href="#" class="comments">评论 (33)</a></p>
		</div>
	</div>
	<!-- end content -->
	<!-- start sidebar -->
	<div id="sidebar">

		<h2>按分类</h2>
		<ul>
			<li><a href="#" onclick="alert('网页作业没有此功能哦！');" >个人心情</a></li>
			<li><a href="#" onclick="alert('网页作业没有此功能哦！');">技术分享</a></li>
			<li><a href="#" onclick="alert('网页作业没有此功能哦！');">摄彩资讯</a></li>
			<li><a href="#" onclick="alert('网页作业没有此功能哦！');">互联网</a></li>
			<li><a href="#" onclick="alert('网页作业没有此功能哦！');">更多>></a></li>
		</ul>
		<h2>访客</h2>
		<ul>
			<li></li>
			<li><a href="#" onclick="alert('网页作业没有此功能哦！');" >小明</a></li>
			<li><a href="#" onclick="alert('网页作业没有此功能哦！');" >小明</a></li>
			<li><a href="#" onclick="alert('网页作业没有此功能哦！');" >小明</a></li>
			<li><a href="#" onclick="alert('网页作业没有此功能哦！');" >小明</a></li>
			<li><a href="#" onclick="alert('网页作业没有此功能哦！');" >小明</a></li>
			<li><a href="#" onclick="alert('网页作业没有此功能哦！');" >小明</a></li>
			<li><a href="#" onclick="alert('网页作业没有此功能哦！');" >小明</a></li>
			<li><a href="#" onclick="alert('网页作业没有此功能哦！');" >小明</a></li>
		</ul>
	</div>
	<!-- end sidebar -->
</div>
<div style="clear: both; height: 40px">&nbsp;</div>
<!-- end page -->
<div id="footer">
	<p>&copy;2016 All Rights Reserved. &nbsp;&bull;&nbsp; Designed by 王孔敏</p>
</div>
</body>
</html>
